<template>
  <div class="linkage">
    <el-button class="addOne" type="success" @click="addOne">新增</el-button>
    <div>
      <div v-for="(website,index) in websiteList"
           :key="index">
        <el-input v-model="newWebSiteList[index]"
                  clearable
                  placeholder="请输入网址"
                  style="width:510px"
        >
          <template slot="prepend">{{ '网站' + (index + 1) }}</template>
        </el-input>
        <el-button type="danger" @click="remove(index)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MultipleWebsiteEditor",
  props: ['item'],
  data() {
    return {
      newWebSiteList: [],
    }
  },
  mounted() {
    this.newWebSiteList = this.websiteList;
  },
  computed: {
    websiteList() {
      return this.item.website.split('\n');
    }
  },
  watch: {
    websiteList() {
      this.newWebSiteList = this.websiteList;
    },
    newWebSiteList() {
      // console.log('watch newWebSiteList', this.newWebSiteList.join('\n'))
      this.item.website = this.newWebSiteList.join('\n');
    }
  },
  methods: {
    remove(index) {
      this.newWebSiteList.splice(index, 1);
      if (this.newWebSiteList.length===0){
        this.newWebSiteList.unshift('');
      }
    },
    addOne() {
      this.newWebSiteList.unshift('');
    }
  },

}
</script>

<style scoped>
.linkage {
  /*display: flex;*/
  position: relative;
}

.linkage div {
  margin-right: 5px;
  margin-top: 5px;
}

.addOne {
  position: absolute;
  top: 5px;
  left: -80px;
}
</style>